<template>
	<view class="zyk-select-input">
		<view :class="selectInputBox">
			<input
				class="select-input"
				:style="{color: disabled ? '#b6b6b6' : ''}"
				v-model="inputValue"
				:placeholder="placeholder"
				:disabled="disabled"
				@focus="handleInputFocus"
				@blur="handleInputBlur"
				@input="handleInput"
			/>
			<view style="padding: 0 5px;">
				<uni-icons v-if="clearable && inputValue" type="clear" color="#C0C4CC" size="23" @click="handleICleanInput"></uni-icons>
			</view>
			<slot name="selectIcon">
				<view class="triangle">
					<uni-icons v-if="isOnSelect" type="top" color="#C0C4CC" size="23" @click="onSelect"></uni-icons>
					<uni-icons v-else type="bottom" color="#C0C4CC" size="23" @click="onSelect"></uni-icons>
				</view>
			</slot>
		</view>
		
		<view v-if="isOnSelect" class="select-options-box">
			<view v-for="option in options" class="select-option">
				<view @click="selectOption(option)">{{getShowName(option)}}</view>
				<view style="width: 100%; padding-top: 2.5%; border-bottom: 1px #b6b6b6 solid;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"zyk-selectInput",
		computed: {
			selectInputBox() {
				return this.inputClassArr.join(' ')
			},
		},
		watch: {
			value: function(newVal, oldVal) {
				this.handleInput({detail: {value: newVal}}) // props传进来的value发生变化时手动调用一次输入框值改变方法
				this.inputValue = newVal
			}
		},
		props: {
			value: {
				type: String,
				default: ''
			},
			clearable: {
				type: Boolean,
				default: true
			},
			// 数组可以是只有真实值的数组,也可以是一个包含显示值和真实值的对象的数组
			options: {
				type: Array
			},
			labelAttrName: {
				type: String,
				default: 'label'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputClassArr: ['select-input-box'],
				inputValue: this.value,
				isOnSelect: false,
			}
		},
		methods: {
			// 输入框聚焦
			handleInputFocus(e) {
				this.$emit('focus', e)
				this.inputClassArr.push('select-input-focus')
			},
			// 输入框失焦
			handleInputBlur(e) {
				this.$emit('blur', e)
				this.inputClassArr = this.inputClassArr.filter(item => item != 'select-input-focus')
			},
			// 清空输入框
			handleICleanInput() {
				if(this.disabled) return
				this.$emit('clear', this.inputValue)
				this.inputValue = ''
			},
			// 输入框内容改变
			handleInput(e) {
				this.$emit('change', e.detail.value)
			},
			// 点击下拉
			onSelect() {
				if(this.disabled) return
				this.$emit('onSelect', !this.isOnSelect)
				this.isOnSelect = !this.isOnSelect
				
				// 是否下拉判断边框是否高亮
				if(this.isOnSelect) this.inputClassArr.push('select-input-focus')
				if(!this.isOnSelect) this.inputClassArr = this.inputClassArr.filter(item => item != 'select-input-focus')
			},
			// 关闭下拉面板
			onCloseSelect() {
				this.isOnSelect = false
			},
			// 选择下拉选项
			selectOption(option) {
				this.$emit('onSelectItem', option)
				if(typeof this.options[0] == 'string') {
					this.inputValue = option
				}
				if(typeof this.options[0] == 'object') {
					this.inputValue = option.value
				}
				this.onSelect()
			},
			// 获取下拉显示的名称
			getShowName(option) {
				if(!this.options || this.options.length == 0) return
				if(typeof this.options[0] == 'string') {
					return option
				}
				if(typeof this.options[0] == 'object') {
					return option[this.labelAttrName]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zyk-select-input {
		width: 100%;
		padding-left: 10px;
		position: relative;
		
		.select-input-box {
			width: 90%;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 35px;
			border: 1px #b6b6b6 solid;
			border-radius: 4px;
			
			.select-input {
				width: 100%;
				height: 100%;
				padding-left: 10px;
			}
			
			.triangle {
				padding: 0 5px;
				border-left: 1px #b6b6b6 solid;
			}
		}
		
		.select-input-focus {
			border-color: #2979ff;
			box-shadow: 0 0 20px -10px #2979ff;
			animation:selectInputFocus 0.5s;
		}
		
		@keyframes selectInputFocus {
			0% {
				// opacity: 0;
				border-color: #b6b6b6;
			}
			100% {
				// opacity: 1;
				border-color: #2979ff;
				box-shadow: 0 0 20px -10px #2979ff;
			}
		}
		
		.select-options-box {
			width: 90%;
			height: 300px;
			margin-top: 5px;
			border-radius: 4px;
			position: relative;
			border: 1px #b6b6b6 solid;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow-y: scroll;
			animation:selectOptionsBox 0.5s;
			
			.select-option {
				width: 95%;
				padding-top: 2.5%;
				border-radius: 4px;
				// border-bottom: 1px #b6b6b6 solid;
			}
			
			.select-option:active {
				background-color: #e3e3e3
			}
		}
		
		@keyframes selectOptionsBox {
			0% {
				opacity: 0;
				height: 0px;
			}
			100% {
				opacity: 1;
				height: 300px;
			}
		}
	}
</style>